<template>
  <div class="select-component">
    <div class="select-content" @click="togglePopup">
        <div class="title"><span >{{title}}</span></div>
        <div class="text"><span >{{catname}}</span></div>
        <div class="icon"><span>></span></div>
    </div>
    <mt-popup class="pop-div" v-model="popupVisible" position="bottom">
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '开始时间'
        },
        valueArr: {
            type:Array,
            default:[]
        },
        catname : {
            type:String,
            default :''
        }
    },
    data() {
        return {
            popupVisible:false,
            slots: [
                {
                flex: 1,
                values: this.valueArr,
                className: 'slot1',
                textAlign: 'center'
                }
            ] 
        }
    },
    methods: {
        togglePopup() {
            this.popupVisible = !this.popupVisible;
        },
        onValuesChange(picker, values) {
            if(values[0]){
                this.$emit('selectTexted',values[0]);
            }
           
             
        }   
    }
}
</script>

<style lang="stylus">
.select-component
    background:#fff
    .pop-div
        width:100%
    .select-content
        display:flex
        flex-direction: row
        padding:10px
        font-size:15px
        span
            dislpay:inline-block
        .title
            flex:0 0 105px
        .text
            flex:1
            text-align:left
            padding-right:10px
            color:#989898
        .icon
            flex:0 0 20px
            color:#989898
</style>